import React, { useEffect, useRef, useContext, useState, useCallback, useMemo } from 'react';
import { ImageBackground, ScrollView, Share, StyleSheet, Text, TouchableOpacity, View, Dimensions, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Device from '../util/device';

const createStyles = () =>
    StyleSheet.create({
        item: {
            backgroundColor: '#fff',
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            // paddingBottom: 24,
            padding: 10,
            borderTopColor: '#EEE',

            // shadowColor: '#ddd',
            // shadowOffset: { width: 2, height: 2 },
            // shadowOpacity: 0.8,
            // shadowRadius: 3,
            backgroundColor: "#fff",
            // padding:8,
            // margin: 5,
            borderRadius: 10,
        },
        itemLeft: {
            flexDirection: 'row',
            alignItems: 'center',
        },
        itemLeftText: {
            paddingLeft: 10,
            fontSize: 16,
            fontWeight: 'bold'
            // color:NovelAppConfig.mainColors.pri
        },
        loginSuc: {
            height: Device.getDeviceHeight / 3,
            justifyContent: 'center',
            alignItems: 'center',
            borderColor: '#eee',
            backgroundColor: '#fffffe'
        },
        imgContent: {
            width: Device.getDeviceWidth / 5,
            height: Device.getDeviceWidth / 5,
            borderRadius: Device.getDeviceWidth / 8,
            justifyContent: 'center',
            alignItems: 'center',
            marginTop: 20
        },
        skinModalContainer: {
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'rgba(0,0,0,.1)',
            flex: 1,
        },

        skinModalContent: {
            width: Device.getDeviceWidth / 4 * 3,
            backgroundColor: '#fff',
            // borderRadius: 5
        },
        itemValue: {
            fontSize: 12,
            color: '#999999'
        },
    });
const width = Dimensions.get('window').width;
const height = width / 5 * 3
export const My = (props) => {
    const styles = createStyles()

    return (
        <SafeAreaView edges="top" style={{ flex: 1, backgroundColor: '#fff' }}>
            <Text style={{ fontSize: 22, fontWeight: 'bold', marginVertical: 38, padding: 14 }}>欢迎来到多多取名</Text>
            <View edges="top" style={{ flex: 1, backgroundColor: 'rgb(251,251,251)', padding: 14, }}>
                <View style={{ borderRadius: 10, padding: 10, backgroundColor: '#fff'}}>
                    <TouchableOpacity
                        style={{
                            justifyContent:'center'
                        }}
                        onPress={() => {
                            props.navigation.navigate('Collect')

                        }}>
                        <View style={styles.item}>
                            <View style={styles.itemLeft}>
                                <Ionicons
                                    name='heart-outline'
                                    size={22}
                                    color={"#000"}
                                // onPress={this._search.bind(this)}
                                />
                                {/* <Image style={{ width: 22, height: 22 }} source={require('../../data/img/about.png')} /> */}
                                <Text style={styles.itemLeftText}>收藏</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>

        </SafeAreaView>
    )
}
